<template>
  <div class="container" style="padding:0 15px 15px;text-align:center">
    <chart :options="currentObj" ref="chart" :style="'height:'+chartHeight+'px;width:100%;'"></chart>
    <el-button @click="changeChart()">推断</el-button>
  </div>

</template>
<script>
  import {chartService} from '@/api';

  export default {
    data: function () {
      return {
        myChart: '',
        currentObj: {},
        isUpdate: false,
        polar: {
          color: window.colors,
          series: [
            {
              type: 'graph',
              layout: 'force',
              roam: true,
              animation: false,
              layoutAnimation: false,
              focusNodeAdjacency: true,
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [1, 5],
              symbolSize: 40,
              edgeLabel: {
                show: false,
                position: 'middle',
                fontSize: 8,
                color: '#666',
                verticalAlign: 'middle'
              },
              emphasis: {
                lineStyle: {
                  // color: '#0ff'
                },
                label: {
                  normal: {
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 10,
                  // position: 'inner',
                  formatter: '{b}'
                }
              },
              lineStyle: {
                color: '#aaa'
              },
              draggable: true,
              force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 150,
                repulsion: 150,
                gravity: 0.2
              },
              data: [],
              edges: []
            }
          ]
        }
      };
    },
    computed: {
      chartHeight() {
        return this.$store.state.bodyHeight - 150;
      }
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        this.isUpdate = false;
        chartService.getConcept().then(res => {
          let category = res.data.category;
          this.polar.legend = {
            right: 'right',
            data: category
          };
          this.setSeries(res.data);
        });
      },
      setSeries(chartData, isNew = false) {
        let series = {};
        let chartSeries = this.polar.series[0];

        let nodes = chartData.nodes;
        if (nodes && nodes.length > 0) {
          if (isNew && chartSeries.data.length > 0) {
            nodes = nodes.concat(chartSeries.data);
          }
          let currentNodes = [];
          nodes.forEach(item => {
            let isIn = currentNodes.filter(node => {
              return node.code === item.code;
            });
            if (isIn.length === 0) {
              currentNodes.push(item);
            }
          });
          series.data = currentNodes.map(function (node, idx) {

            node.id = node.chiName || node.name;
            node.category = Math.floor(node.category);
            /* if (node.category === 0) {
             node.symbol = 'diamond';
             }*/

            node.name = node.secuAbbr || node.name.substr(0, 4);
            return node;
          });
        }

        let links = chartData.links;
        if (links && links.length > 0) {
          series.edges = links.map(function (link, idx) {
            link.label = {
              position: 'middle',
              fontSize: 8,
              show: false
            };
            link.lineStyle = {
              color: isNew ? '#f00' : '#aaa'
            };
            link.edgeLabel = {
              color: '#f00'
            };
            return link;
          });
          if (isNew && chartSeries.edges.length > 0) {
            series.edges = series.edges.concat(chartSeries.edges);
          }
        }
        if (chartData.category) {
          series.categories = chartData.category;
        }
        this.polar.series[0] = Object.assign({}, chartSeries, series);
        let myChart = this.$refs['chart'];
        myChart.hideLoading();
        myChart.mergeOptions(this.polar, true);
      },
      changeChart() {
        if (!this.isUpdate) {
          this.isUpdate = true;
          let myChart = this.$refs['chart'];
          myChart.showLoading();
          chartService.checkNew().then(res => {
            chartService.getConcept({index: 2}).then(resData => {
              this.setSeries({links: resData.data.links}, true);
            });
          });
        } else {
          this.$msgbox.confirm('已完成推断,是否需要重试', '提示', {
            confirmButtonText: '确定重试',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.initChart();
          });

        }
      }

    }
  };

</script>
